<template>
  <div class="template-list">
    <slot name="compare-title" />
    <descriptions
      :title="descriptionTitle"
      :bordered="true"
      :column="descriptionColumn"
      :size="descriptionSize"
      :params="params"
      v-bind="{
        ...$attrs
      }"
    >
      <descriptions-item
        v-for="{
          prop,
          displayProp,
          props,
          label,
          enums,
          component,
          isHtml,
          isFull,
          ...arg
        } in configs"
        :key="prop + '_' + label"
        :label="label"
        v-bind="arg"
      >
        <slot :name="prop">
          <component
            :is="component"
            v-if="component"
            :prop="prop"
            :props="props"
            :value="isFull ? params : params[prop]"
            :data="isFull ? params : params[prop]"
            v-bind="{
              ...$attrs,
              ...arg
            }"
          /><!--专用显示字段-->
          <span v-else-if="displayProp">{{
            data[displayProp] | mapArray | mapDefault
          }}</span>
          <span v-else-if="isHtml" v-html="params[prop]" />
          <!--使用枚举格式化数组字段信息-->
          <span v-else-if="enums && Array.isArray(params[prop])">
            {{ listEnumsValue(enums, params[prop]) }}
          </span>
          <!--使用枚举显示字段信息-->
          <span v-else-if="enums">
            {{ getEnumsValue(enums, params[prop]) | mapEnums }}
          </span>
          <!--默认显示-->
          <span v-else :class="params[prop+'RedColor'] ? 'red-color' : ''">{{ params[prop] | mapArray | mapDefault }}</span>
        </slot>
      </descriptions-item>
      <slot />
    </descriptions>
  </div>
</template>
<script>
import GetEnumValueMixins from 'modules/mixins/get-enums-value'
import FilterValueMixins from 'modules/mixins/filter-list'
import EditDataMixins from 'modules/mixins/edit-data'
export default {
  mixins: [GetEnumValueMixins, FilterValueMixins, EditDataMixins],
  props: {
    configs: {
      type: Array,
      default() {
        return []
      }
    },
    descriptionTitle: {
      type: String,
      default: ''
    },
    descriptionColumn: {
      type: Number,
      default: 2
    },
    descriptionSize: {
      type: String,
      default: 'default'
    }
  }
}
</script>
<style scoped>
.red-color {
  color: red;
}
</style>
